<template>
  <div class="Login">
    <div class="all">
      <div class="username-div">
        <el-input
          @input="panduan('username')"
          prefix-icon="el-icon-setting"
          v-model="userMsg.username"
          onkeyup="this.value=this.value.replace(/[^\w_]/g,'');"
          placeholder="请输入账号"
          maxlength="13"
          clearable>
        </el-input>
        <div class="tishi" v-if="userChange.username === true">
          账号不可空
        </div>
      </div>
      <div class="password-div">
        <el-input
        @input="panduan('password')"
          placeholder="请输入密码"
          prefix-icon="el-icon-edit-outline"
          v-model="userMsg.password"
          type="password"
          maxlength="13"
        >
        </el-input>
        <div class="tishi"  v-if="userChange.password === true">
          密码不可空
        </div>
      </div>
      <div class="btn-div">
        <el-button @click="btnLogin">登录</el-button>
        <el-button>注册</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
 data () {
   return {
     userChange: {
       username: false,
       password: false
     },
     userMsg: {
       username: '',
       password: ''
     }
   }
 },
 methods: {
  //  请求方法
   login() {
    //  写请求
    window.localStorage.setItem('user', JSON.stringify({
      id: 1
    }))
    this.$router.push('/apply/my')
   },
  //  验证方法
   panduan(value) {
     this.userMsg[value] === ''
      ? this.userChange[value] = true
      : this.userChange[value] = false

      return this.userMsg[value] === ''
              ? false
              : true
   },
   // button实际点法方法
   btnLogin () {
     this.panduan('username') && this.panduan('password')
      ? this.login()
      : null
   }
 }
}
</script>

<style lang="scss" scoped>

.Login{
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('../../assets/123.png');
  background-size: cover;
}
.tishi {
  position: absolute;
  color: red;
  font-size: 13px;
}


.all {
  width: 400px;
  height: 300px;
  background-color: #fff;
  border-radius: 30px;
  padding: 30px 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
}
</style>